<template>
	<view>
		<view class="gui-flex gui-space-around gui-border-t gui-bg-white gui-border-radius-large gui-box-shadow"
			style="position: fixed;bottom: 20rpx;width: 90%;padding: 20rpx 0rpx;left: 5%;z-index: 999999;">
			<view v-for="(item,index) in menus" :class="index==menu_index?'menu_action':'menu'"
				style="display: flex; align-items: center;" @tap="navChange(item,index)">
				<view style="text-align: center; margin: 0 40rpx;">
					<!-- <view style="text-align: center; margin: 0 50rpx;"> -->
					<image :src="item.img" style="height: 58rpx; width: 58rpx; margin-top: -8rpx;"></image>
					<!-- gui-footer-icon-buttons-text -->
					<text style="font-size: 22rpx; margin-top: -8rpx;"
						:class="[menu_index == index ? 'gui-primary-color' : 'gui-color-gray', 'gui-block']">
						{{item.label}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			menu_index: {
				type: String,
				default: "0"
			}
		},
		data() {
			return {
				menus: [{
						icon: '&#xe612;',
						label: '卡包',
						value: 'card',
						img: '../../static/icon/kb.png',
						url: "./cardlist"
					},
					{
						icon: '&#xe612;',
						label: '优惠券',
						img: '../../static/icon/yhq.png',
						value: 'coupon',
						url: "./Coupon"
					},
					{
						icon: '&#xe612;',
						label: '福利中心',
						img: '../../static/icon/xzq.png',
						value: 'selectCard',
						url: "./selectCard"
					},
					// {
					// 	icon: '&#xe612;',
					// 	label: '商城',
					// 	value: 'shop',
					// 	img: '../../static/icon/sc.png'
					// },
					{
						icon: '&#xe612;',
						label: '消费记录',
						value: 'record',
						img: '../../static/icon/xfjl.png',
						url: './record'
					},
				],
			}
		},
		methods: {
			navChange(item, index) {
				var self = this
				console.log('item: ', item, index);
				this.menu = item.value;
				this.currentIndex = index
				uni.setNavigationBarTitle({
					title: item.label
				})
				uni.redirectTo({
					url: item.url
				})
			}
		}

	}
</script>
<style>
	.menu_action{
		font-weight: bold;
		color: red;
	}
	.menu{
		font-weight: normal;
		color:#999999
	}
</style>